<template>
  <div>
    <el-button type="primary" @click="requestPermission">
      请求通知权限
    </el-button>
    <el-button type="success" @click="showNotify">
      测试通知（带图片）
    </el-button>
  </div>
</template>

<script>
export default {
  // meta: {title: "通知", icon: "el-icon-edit-outline", authorityList: 100, sort: 5},
  methods: {
    requestPermission() {
      Notification.requestPermission().then(p => {
        if (p === "granted") {
          this.$message.success("✅ 已授权通知");
        } else if (p === "denied") {
          this.$message.error("❌ 已拒绝，请到浏览器设置里手动开启");
        } else {
          this.$message.info("ℹ️ 用户未选择");
        }
      });
    },
    showNotify() {
      if (Notification.permission === "granted") {
        const n = new Notification("新订单提醒", {
          body: "您有一条新订单，请注意处理！",
          icon: "/static/logo.png",
          image: "/static/banner.png"
        });

        n.onclick = () => {
          window.focus();
          this.$message.success("点击了通知");
        };
      } else {
        this.$message.warning("请先授权通知权限");
      }
    }
  }
};
</script>
